{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="topdogindex-container">
  <div class="indicator-header">
    <div class="breadcrumb">
      <a href="{% url 'metrics_home' %}">指标中心</a>
      <span class="separator">></span>
      <span class="current">TOPDOGINDEX 指标</span>
    </div>
    
    <div class="indicator-info">
      <h2>TOPDOGINDEX 多时间框架分析</h2>
      <p>多时间框架对比分析，包含6张comparison图片</p>
    </div>
  </div>

  <div class="controls-panel">
    <div class="control-group">
      <label for="timeframe-select">时间框架:</label>
      <select id="timeframe-select">
        <option value="all">全部显示</option>
        {% for timeframe in timeframes %}
        <option value="{{ timeframe }}">{{ timeframe|upper }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="control-group">
      <label for="display-mode-select">展示模式:</label>
      <select id="display-mode-select">
        <option value="grid">网格布局</option>
        <option value="single">单页展示</option>
      </select>
    </div>
    
    <div class="control-group">
      <button id="refresh-btn" class="btn btn-primary">
        <span class="refresh-icon">🔄</span>
        手动刷新
      </button>
    </div>
    
    <div class="control-group">
      <label>
        <input type="checkbox" id="auto-refresh-checkbox" checked>
        自动刷新 (10秒)
      </label>
    </div>
  </div>

  <div class="charts-container" id="charts-container">
    <!-- 图表将在这里动态加载 -->
  </div>

  <div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
    <p>正在加载图表...</p>
  </div>
</div>

<script src="{% static 'js/topdogindex.js' %}"></script>
<script>
  // 传递配置给JavaScript
  window.topdogindexConfig = {
    timeframes: {{ timeframes|safe }},
    indicatorId: '{{ indicator_id }}'
  };
</script>
{% endblock %}
